import Taro, { Component } from '@tarojs/taro'
import {Button, Input, View} from '@tarojs/components'
import { isPhone, showToast } from "../utils/common";

import './footerInfo.scss'

import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../store/Stores'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
export default class SmsCode extends Component<IHomeProps>{
  constructor(props) {
    super(props)
  }

  state = {
    smsCode: '', // 短信验证码 ,
    phoneNumber: '', // 手机号码
    getCodeText: '获取验证码',
    btnCodeStatus: false
  }

  componentWillMount(): void {
    console.log(this.props)
  }

  changeInput = (field: string, e) => {
    let that = this
    console.log(e.detail)
    this.setState({ [field]: e.detail.value }, () => {
      let { phoneNumber, smsCode } = this.state
      if(phoneNumber.length === 11 && smsCode.length >= 4){
        that.props.onGetCode(phoneNumber, smsCode)
      }
    })
  }

  getCode() {
    let { btnCodeStatus, phoneNumber } = this.state
    if(typeof btnCodeStatus === 'number') return
    if(!phoneNumber){showToast('请填写手机号1~'); return false}
    if(!isPhone(phoneNumber)){showToast('请填写11位手机号码~'); return false}
    let { userStore } =  this.props.stores
    userStore.getSmsCode({
      form: {
        phoneNumber
      },callback: () => {
        this.countDown()
        showToast('验证码发送成功,请注意查收~')
      }
    })
  }

  // 验证码倒计时
  countDown() {
    let getCodeText = 60
    let timer = setInterval(() => {
      getCodeText--
      if(getCodeText===0){
        clearInterval(timer)
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false,
        })
      }else {
        this.setState({
          getCodeText: getCodeText+'s',
          btnCodeStatus: true,
        })
      }
    },1000)
  }

  render() {
    let { getCodeText, btnCodeStatus } = this.state
    return(
      <View className='sms-code'>
        <View className='form-wrap__group'>
          <View className='form-wrap__title'>{this.props.filedName}</View>
          <View className='form-wrap__content'>
            <Input className='form-wrap__input' name='cardPhone' type='number' placeholderClass='placeholder-class' placeholder='请输入手机号码'
                   onInput={this.changeInput.bind(this, 'phoneNumber')}
                   onFocus={this.changeInput.bind(this, 'phoneNumber')}
            />
          </View>
        </View>
        <View className='form-wrap__group'>
          <View className='form-wrap__title'>验证码</View>
          <View className='form-wrap__content'>
            <Input className='form-wrap__input' name='smsCode' placeholderClass='placeholder-class' placeholder='请输入验证码'
                   onInput={this.changeInput.bind(this, 'smsCode')}
                   onFocus={this.changeInput.bind(this, 'smsCode')}
            />
            <Button className='form-wrap__code' disabled={btnCodeStatus} onClick={this.getCode.bind(this)}>{getCodeText}</Button>
          </View>
        </View>
      </View>
    )
  }
}
